<template>
  <div>
      <el-button type="primary" @click="willAdd">添加</el-button>
      
      <v-list @willEdit="willEdit" :list="list" @init="init"></v-list>
     
      <v-form :info="info" :list="list" @init="init" ref="form"></v-form>

       <el-pagination
         layout="prev, pager, next"
        :total="total"
        :page-size="size"
        background
        @current-change="changePage"
       >
        </el-pagination>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import vForm from "./components/form.vue";
import vList from "./components/list.vue";
import { requserlist,requsercount } from "../../https/api";
import {toggle} from "../../mixins/toggle"
export default {
  components: {
    vList,
    vForm,
  },
  mixins:[toggle],
  props: [],
  data() {
    return {
        // 初始化列表数据
        list:[],
        size:2,//一页的数
        page:1,//当前的页码
        total:0//总数
    };
  },
  computed: {
    ...mapGetters({}),
  },
  methods: {
    ...mapActions({}),
    // 刷新列表
    init(){
        this.reqList();
         // 请求总数
      requsercount().then((res) => {
        if (res.data.code == 200) {
          this.total = res.data.list[0].total;
        }
      });
    },
    reqList() {
      requserlist({ page: this.page, size: this.size }).then((res) => {
        // console.log(res);
        if (res.data.code == 200) {
          let arr=res.data.list?res.data.list:[]
          if(arr.length==0&&this.page>1){
            this.page--;
            this.reqList()
            return;
          }
          this.list = arr;
        }
      });
    },
    // 修改了页码
    changePage(e){
      this.page= e;
      this.reqList();
    }
  },
  mounted() {
  //一进页面就获取数据
    this.init();
  },
};
</script>
<style lang="less" scoped>
@import "../../less/index.less";
</style>